<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/column/cosult_banner.png" alt />
      <div class="bread">
        <p>
          <router-link to="/">首页</router-link>》
          <span style="cursor:pointer" @click="zhengji">征集</span>
        </p>
      </div>
    </div>
    <div class="big">
      <div class="title">
        <p>征集捐赠</p>
      </div>

      <div class="title_top">
        <p class="xwzx_title">{{ message[0].name }}</p>
        <span class="xwzx_second_title">
          编辑：{{ message[0].bianji }}&nbsp; &nbsp;&nbsp;&nbsp;发布时间：{{
          message[0].releaseTime
          }}
        </span>
      </div>

      <div v-html="message[0].zhengwen"></div>
    </div>

    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
import { replaceImg, replaceA } from "../../api/replace";
export default {
  data() {
    return {
      message: [{ name: "" }],
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: [], //当前页显示内容
    };
  },
  components: {
    foot2: foot2,
  },

  mounted() {
    this.look(this.$router.history.current.query.id);
  },
  methods: {
    zhengji() {
      this.$router.push({
        path: "/zhengji",
        query: {
          content: this.search_content,
          orderId: this.i,
          sort: this.sort,
        },
      });
    },
    look(id) {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.$api.get(`${this.book}vol/getInfo?catid=58&id=${id}`).then((res) => {
        if (!res.data.list[0].name) return;
        var pic = res.data.list[0].zhengwen;
        var newPic = replaceImg(pic);
        var a = replaceA(newPic);
        res.data.list[0].zhengwen = a;
        this.message = res.data.list;
        if (!this.message[0].releaseTime) return;
        this.message[0].releaseTime = this.message[0].releaseTime.slice(0, 10);
      });
    },
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #6e6e6e;
}
li,
ul,
hr,
p,
h3 {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.big {
  width: 1200px;
  margin: auto;
  padding-top: 44px;
  padding-bottom: 85px;
}
.bg_zj {
  background: url("../../assets/image/zhengji/zj.png") no-repeat;
  height: 65px;
  color: red;
  font-size: 24px;
  text-align: center;
  line-height: 65px;
  margin-bottom: 60px;
}

.xwzx_title {
  color: #060606;
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.title_top {
  text-align: center;
  margin-bottom: 5px;
}
.title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
  padding-bottom: 14px;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}

.table li {
  box-sizing: border-box;
  padding: 20px 20px 12px;
  display: flex;
  color: #999;
  justify-content: space-between;
  border-bottom: 1px solid #999999;
}
.table {
  margin-bottom: 60px;
  margin-top: 44px;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
/* yzm */

span {
  display: inline-block;
}
</style>
